<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">资金结算单</span>
      </div>
      <s-table
        :table="table"
        @http="tableWatch">
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="操作"
          width="80">
          <template scope="s">
            <el-button type="primary" icon="el-icon-download" size="mini" @click="download(s.row)" round></el-button>
          </template>
        </el-table-column>
        <el-form-item slot="multiSelect" label="多选操作" prop="multiSelect" v-if="table.multiSelect">
          <el-row>
            <el-col :span="8">
              <el-button size="small" type="primary" @click="download('')">多选导出</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item label="报销类型" prop="type">
              <el-select v-model="autoVue_table_type" placeholder="报销类型">
                <el-option
                  label="全部"
                  value="">
                </el-option>
                <el-option
                  label="成本费用"
                  value="expenseCost">
                </el-option>
                <el-option
                  label="暂借款"
                  value="borrowing">
                </el-option>
                <el-option
                  label="差旅"
                  value="travelExpense">
                </el-option>
                <el-option
                  label="奖励扣款"
                  value="rewardDeduction">
                </el-option>
                <el-option
                  label="结算单"
                  value="adviceSettlement">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item label="报销单号" prop="number">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_number"
                        placeholder="报销单号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item label="结算状态" prop="state">
              <el-select v-model="autoVue_table_state" placeholder="结算状态">
                <el-option
                  label="全部"
                  value="">
                </el-option>
                <el-option
                  label="未结算"
                  :value="1">
                </el-option>
                <el-option
                  label="部分结算"
                  :value="2">
                </el-option>
                <el-option
                  label="全部结算"
                  :value="3">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item label="报销人员" prop="reimbursementName">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_reimbursementName"
                        placeholder="报销人员"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item label="收款方" prop="supplierName">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_supplierName"
                        placeholder="收款方"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item label="费用项目" prop="costItem">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_costItem"
                        placeholder="费用项目"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item label="结算类别" prop="settleCategory">
              <el-select v-model="autoVue_table_settleCategory" placeholder="结算类别">
                <el-option
                  label="全部"
                  value="">
                </el-option>
                <el-option
                  label="费用"
                  :value="2">
                </el-option>
                <el-option
                  label="成本"
                  :value="1">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item prop="departmentId" label="所属部门">
              <el-cascader
                :options="DEPARTMENT.department"
                v-model="autoVue_table_departmentId"
                :show-all-levels="false"
                ref="departmentId"
                clearable
                filterable
                change-on-select
                :props="{
                  value: 'key',
                }"
                placeholder="所属部门"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 23, offset: 0}" class="">
            <el-form-item label="归属期间" prop="period">
              <el-date-picker
                v-model="autoVue_table_bxSetlecycle"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 23, offset: 0}" class="">
            <el-form-item prop="bearDepartmentId" label="费用部门">
              <el-cascader
                :options="DEPARTMENT.department"
                v-model="autoVue_table_bearDepartmentId"
                :show-all-levels="false"
                ref="departmentId"
                clearable
                filterable
                change-on-select
                :props="{
                  value: 'key',
                }"
                placeholder="费用所属部门"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="可用操作" prop="multiSelect">
          <el-row>
            <el-col :span="8">
              <el-button size="small" type="primary" @click="download('')">条件导出</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </s-table>
    </el-card>
  </div>
</template>

<script>
  import {AutoVue, SplitK} from '~/plugins/Tools';

  export default AutoVue({
    data: {
      table: {
        column: [
          {'label': '报销类型', 'prop': 'typeName', 'minWidth': '0px', search: true, searchName: 'type'},
          {'label': '报销单号', 'prop': 'number', 'minWidth': '220px', search: true},
          {'label': '报销人员', 'prop': 'reimbursementName', 'minWidth': '0px', search: true},
          {'label': '所属部门',
            'prop': 'departmentName',
            searchName: 'departmentId',
            searchAfter: function (value) {
              return value.reverse()[0];
            },
            searchInitValue: function () {
              return [];
            },
            type: 'custom',
            search: true,
            'minWidth': '220px'},
          {'label': '费用所属部门',
            searchName: 'bearDepartmentId',
            searchAfter: function (value) {
              return value.reverse()[0];
            },
            searchInitValue: function () {
              return [];
            },
            type: 'custom',
            search: true,
            'prop': 'bearDepartmentName',
            'minWidth': '220px'},
          {'label': '结算类别', 'prop': 'categoryName', 'minWidth': '0px', search: true, searchName: 'settleCategory'},
          {'label': '收款方', 'prop': 'supplierName', 'minWidth': '150px', search: true},
          {'label': '费用项目', 'prop': 'costItem', 'minWidth': '200px', search: true},
          {'label': '所属期间',
            formatter: (row, column) => {
              return this.a.methods.formatterTime(row[column.property || column], 22);
            },
            type: 'DateRange',
            search: true,
            searchName: 'bxSetlecycle',
            'prop': 'bxSetlecycleName',
            'minWidth': '120px'},
          {'label': '预计结算时间',
            'prop': 'estimatedSettleTime',
            formatter: (row, column) => {
              return this.a.methods.formatterTime(row[column.property || column], 22);
            },
            'minWidth': '120px'},
          {'label': '应结算',
            'prop': 'settleAmout',
            'minWidth': '0px',
            formatter: (row, column) => {
              return SplitK(row[column.property || column]);
            }},
          {'label': '扣款金额',
            'prop': 'debitAmout',
            'minWidth': '0px',
            formatter: (row, column) => {
              return SplitK(row[column.property || column]);
            }},
          {'label': '奖励金额',
            'prop': 'rewardAmout',
            'minWidth': '0px',
            formatter: (row, column) => {
              return SplitK(row[column.property || column]);
            }},
          {'label': '实际结算',
            'prop': 'actualSettleAmout',
            'minWidth': '0px',
            formatter: (row, column) => {
              return SplitK(row[column.property || column]);
            }},
          {'label': '油卡金额',
            'prop': 'oilcardSettleAmout',
            'minWidth': '0px',
            formatter: (row, column) => {
              return SplitK(row[column.property || column]);
            }},
          {'label': '现金金额',
            'prop': 'cashAmout',
            'minWidth': '0px',
            formatter: (row, column) => {
              return SplitK(row[column.property || column]);
            }},
          {'label': '剩余结算',
            'prop': 'surplusAmout',
            'minWidth': '0px',
            formatter: (row, column) => {
              return SplitK(row[column.property || column]);
            }},
          {'label': '结算状态', 'prop': 'stateName', 'minWidth': '0px', search: true, searchName: 'state'},
          {'label': '已结算', 'prop': 'settlementAmout', 'minWidth': '0px'},
        ],
        key: 'id',
        url: '/reports/settlementDetails/searchByPage',
        popover: {
          width: '660px',
        },
      },
    },
    transition: 'slide-fade-bottom',
    head: {
      'title': '资金结算单',
      'meta': [
        {'hid': 'description', 'name': 'description', 'content': '乐速科技平台 报表管理 查看资金结算单'},
      ],
    },
    methods: {
      download (row) {
        let tableRef = 'table';

        let ids = [];
        if (row) {
          ids.push(row.id);
        } else {
          this[tableRef].multipleSelection.forEach(item => {
            ids.push(item.id);
          });
        }
        this.$confirm('您将导出资金结算单。', '确认导出？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            try {
              let option = Object.assign({}, this['autoVue_' + tableRef]);
              await this.p({
                url: '/reports/settlementDetails/export',
                method: 'post',
                responseType: 'blob',
                data: {
                  ids,
                  ...option,
                },
              });
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
    },
    store: ['DEPARTMENT'],
    mounted: function () {
      this.tableWatch('table');
      this.USE('DEPARTMENT');
      console.log(this);
    },
  });
</script>
